/* 
    Document   : chat
    Created on : Apr 5, 2011, 6:52:59 PM
    Author     : user
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/
@import "reset.css";
@import "common.css";

#wrap, #header, #content{
    width: 931px;
}

#menu-bar {
    height: 28px;
}

#content {
    height: 500px;
}

#left-column {
    min-width: 300px;
    max-width: 300px;
    float: left;
}

#friends-panel, #room-panel {
    height: 200px;
    margin-bottom: 20px;
    border: rgb(122,118,118) 1px solid;
    background-color: rgb(201,198,194);
    padding: 3px;
}

#room-panel, .friends {
    overflow: auto;
}

.category, .room {
    cursor: pointer;
}

.category > .room, .category > .category {
    margin-left: 15px;
}

.friend {
    cursor: pointer;
}

.friend-name {
    color: red;
    display: inline;
}

#right-column {
    margin-left: 10px;
    max-width: 600px;
    min-width: 600px;
    float: left;
}

#main-chat-container {
    float: left;
    height: 400px;
    border: rgb(122,118,118) 1px solid;
    background-color: rgb(233,233,233);
    padding: 10px;
}

#user-room-container {
    margin-left: 20px;
    width: 80px;
    overflow: hidden;
    float: left;
    margin-bottom: 20px;
    border: rgb(122,118,118) 1px solid;
    background-color: rgb(201,198,194);
    padding: 3px;
}

.chat-container, #chat-box-input {
    display: block;
    width: 680px;
}

.chat-container {
    height: 400px;
    overflow: auto;
}

.chat-text {
    width: 95%;
}

.tab-container {
    width: auto;
    height: 30px
}

.tab {
    padding-left: 5px;
    padding-right: 5px;
    min-width: 50px;
    max-width: 100px;
    border-left: solid black 1px;
    border-top: solid black 1px;
    border-bottom: solid black 1px;
    float: left;
    cursor: pointer;
}

.active {
    background: black;
    color: white;
}

.tab-text, .tab-close {
    display: inline;
}

.tab-close:hover {
    color: red;
}

.tab-close {
    margin-left: 5px;
    color: inherit;
}

#footer {
    padding: 3px;
    background-color: rgb(0,0,0);
}

.outer {
    border: rgb(255,255,255) 3px solid;
    border-radius: 5px;
}

#footer .inner {
    border: rgb(122,118,118) 1px solid;
    background-color: rgb(233,233,233);
    padding: 10px;
    font-style: italic;
}